<template>
  <div class="banner b5">
    <div class="container-x-suit">
      <div class="container-y-suit center">
        <h2 v-text="title" class="title"></h2>
        <div class="nav-flex-between">
          <div
            class="nav-flex-around"
            v-for="(workerList, index) in workerArray"
            :key="index">
            <div
              class="flex-item"
              v-for="worker in workerList"
              :key="worker.img">
              <div class="imgWrapper">
                <img :src="worker.img" @click="$router.push('/capintro')"/>
              </div>
              <h3 v-text="worker.label"></h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requireImgMixin } from '@/common/js/mixin'
export default {
  name: 'Banner4',
  mixins: [requireImgMixin],
  data() {
    return {
      title: '优秀班组',
      workerArray: [
        [
          { img: this.requireImg('yxbz1.png'), label: '优秀木工班组' },
          { img: this.requireImg('yxbz2.png'), label: '优秀木工班组' }
        ], [
          { img: this.requireImg('yxbz3.png'), label: '优秀焊工班组' },
          { img: this.requireImg('yxbz4.png'), label: '优秀焊工班组' }
        ]
      ]
    }
  }
}
</script>

<style lang="stylus">
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

$_shadow = 2px 2px 2px rgba(0, 0, 0, 0.3)
$_lineHeight = 30px

.banner
  &.b5
    background-image: requireImg('banner5.jpg')
    .title
      color: #FFF
      text-align: center
      font-size: 32px
      font-weight: bold
      text-shadow: $_shadow
      &:before
        background-color: #FFF
        content: ''
        width: 37px
        height: 2px
        display: inline-block
        position: relative
        bottom: 10px
        margin: 0 5px
        box-shadow: $_shadow
      &:after
        background-color: #FFF
        content: ''
        width: 37px
        height: 2px
        display: inline-block
        position: relative
        bottom: 10px
        margin: 0 5px
        box-shadow: $_shadow
    .nav-flex-between
      position: relative
      padding: 20px 25px
      top: 50%
      transform: translateY(-50%)
      .flex-item
        width: 250px
        height: $_lineHeight + @width
        background-color: lighten($color-theme, 40)
        box-shadow: $_shadow
        h3
          text-align: center
          height: $_lineHeight
          line-height: $_lineHeight
          font-size: $font-size-small
          color: $color-text-main
          position: relative
          bottom: 0
        .imgWrapper
          height: @width
          width: 100%
        img
          cursor: pointer
          width: 100%
          height: 100%

@media (max-width: 1100px)
  .banner
    &.b5
      .nav-flex-between
        .flex-item
          width: 180px
          height: $_lineHeight + @width
          .imgWrapper
            height: @width
            width: 100%

@media (max-width: 450px)
  .banner
    &.b5
      .nav-flex-between
        .flex-item
          width: 140px
          height: $_lineHeight + @width
          .imgWrapper
            height: @width
            width: 100%

@media (max-width: 370px)
  .banner
    &.b5
      .container-y-suit
        height: 350px
      .nav-flex-between
        .flex-item
          width: 100px
          height: $_lineHeight + @width
          .imgWrapper
            height: @width
            width: 100%
</style>
